<template>
  <div>
    <WatchWatchEffect></WatchWatchEffect>
    <RefView></RefView>
    <!-- <PersonView :list="personList"></PersonView> -->
    <PersonView></PersonView>
    <LifeCycle v-if="showLifeCycle"></LifeCycle>
  </div>
</template>

<!-- 安装vite-plugin-vue-setup-extend插件让<script setup>标签</script>可以直接自定义组件名 -->
<script setup lang="ts" name="DemoView">
import WatchWatchEffect from "@/views/demo/WatchWatchEffect/index.vue"
import RefView from "@/views/demo/RefView/index.vue"
import PersonView from "@/views/demo/PropsView/index.vue"
import LifeCycle from "@/views/demo/LifeCycle/index.vue"
// 接口是一种约束（规范），不是值，在导入时要在前面加上type
import { type Persons } from "@/types"

const showLifeCycle = ref(true)
const personList = reactive<Persons>([
  { id: "p-1", name: "李四1", age: 25 },
  { id: "p-2", name: "李四2", age: 22 },
  { id: "p-3", name: "李四3", age: 6, grade: "小学一年级" },
])
console.log("personList", personList)

console.log("父===组件创建了")
onBeforeMount(() => {
  console.log("父===挂载前")
})
onMounted(() => {
  console.log("父===挂载后")
})
onBeforeUpdate(() => {
  console.log("父===更新前")
})
onUpdated(() => {
  console.log("父===更新后")
})
onBeforeUnmount(() => {
  console.log("父===卸载前")
})
onUnmounted(() => {
  console.log("父===卸载后")
})
</script>

<style scoped></style>
